.fx-link {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  line-height: 24px;
  position: relative;
  color: $font-color-default;

  &.underline {
    &::after {
      content: '';
      display: none;
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
    }

    &:hover {
      &::after {
        display: block;
      }
    }
  }

  &.disabled {
    cursor: pointer;
  }

  &.default {
    color: $font-color-important;

    &::after {
      background-color: $font-color-important;
    }

    &.disabled {
      color: $font-color-secondary;

      &::after {
        background-color: $font-color-secondary;
      }
    }
  }

  &.info {
    color: $font-color-secondary;

    &::after {
      background-color: $font-color-secondary;
    }

    &.disabled {
      color: $font-color-lowest;

      &::after {
        background-color: $font-color-lowest;
      }
    }
  }

  &.primary {
    color: $color-primary;

    &::after {
      background-color: $color-primary;
    }

    &.disabled {
      color: $color-primary-3;

      &::after {
        background-color: $color-primary-3;
      }
    }
  }

  &.success {
    color: $color-success;

    &::after {
      background-color: $color-success;
    }

    &.disabled {
      color: $color-success-3;

      &::after {
        background-color: $color-success-3;
      }
    }
  }

  &.warning {
    color: $color-warning;

    &::after {
      background-color: $color-warning;
    }

    &.disabled {
      color: $color-warning-3;

      &::after {
        background-color: $color-warning-3;
      }
    }
  }

  &.error {
    color: $color-error;

    &::after {
      background-color: $color-error;
    }

    &.disabled {
      color: $color-error-3;

      &::after {
        background-color: $color-error-3;
      }
    }
  }
}
